<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('数值连接输入框')}`">{{ $t('数值连接输入框') }}</t>
            <li>
                通过配置<span class="s-code">valueType</span>为
                <span class="s-code">"number"</span>，那么该控件会自动变成数值连接框；
            </li>
            <li>注意：数值为字符串类型</li>
        </template>
        <div style="width: 500px;color: #666;">
            <p>v-model 绑定值：{{ value }}</p>
            <sib-item v-model="value" :props="props" @change="change"></sib-item>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'inputrange',
            valueType: 'number',
            min: 10,
            max: 20,
            precision: 2,
        });

        return {
            props,
            value,
            change(data) {
                console.log('data: ', data);
            },
            templateString: `<template>
    <p>v-model 绑定值：{{ value }}</p>
    <sib-item v-model="value" :props="props" @change="change"></sib-item>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'inputrange',
            valueType: 'number',
            min: 10,
            max: 20,
            precision: 2,
        });

        return {
            props,
            value,
            change(data) {
                console.log('data: ', data);
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
